<template>
  <el-dialog  :width="'30%'"  v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
             label-width="120px">
      <el-input style="display: none" v-model="dataForm.projectId" placeholder=""></el-input>
      <el-form-item label="定位点名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="请输入定位点名称"></el-input>
      </el-form-item>
      <el-form-item label="所属项目" >
        {{dataForm.projectName}}
      </el-form-item>
      <el-form-item label="所属线路" prop="lineId">
        <el-select v-model="dataForm.lineId" placeholder="请选择线路"  clearable>
          <el-option  v-for="data in dataForm.lineList"   :key="data.id" :label="data.name" :value="data.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="定位点经度" prop="lgt">
        <el-input v-model="dataForm.lgt" placeholder="请输入定位点经度"></el-input>
      </el-form-item>
      <el-form-item label="定位点纬度" prop="dms">
        <el-input v-model="dataForm.dms" placeholder="请输入定位点纬度"></el-input>
      </el-form-item>
      <el-form-item  label="深埋" prop="depthNumber">
        <el-input v-model="dataForm.depthNumber" placeholder="埋深"></el-input>
      </el-form-item>
      <el-form-item label="电缆敷设方式" prop="roughInType">
        <el-select v-model="dataForm.roughInType" placeholder="请选择电缆敷设方式"  clearable>
          <el-option  v-for="data in dataForm.roughInTypeList"  :label="data.dictLabel" :key="data.id" :value="data.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.roughInType==2" label="顶管扩孔数" prop="equipmentTypeId">
        <el-input v-model="dataForm.holesNumber" type="number" placeholder="请输入顶管孔数"></el-input>
      </el-form-item>
      <el-form-item v-if="dataForm.roughInType==2" label="线缆条数" prop="equipmentTypeId">
        <el-input v-model="dataForm.cableNumber" type="number" placeholder="线缆条数"></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="notes">
        <el-input v-model="dataForm.notes" placeholder="请输入备注信息"></el-input>
      </el-form-item>
      <el-form-item label="定位点图片" prop="fileListData">
        <el-upload
          :action="dataForm.actionUrl"
          list-type="picture-card"
          multiple
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :before-upload="beforeUploadHandle"
          :file-list="dataForm.fileList"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog  v-model="dataForm.dialogVisible" >
          <img width="100%" :src="dataForm.dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="图片备注" prop="notesImg">
        <el-input v-model="dataForm.notesImg" placeholder="请输入图片备注"></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import app from "@/constants/app";
import {getToken} from "@/utils/cache";
import {IObject} from "@/types/interface";
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const filrUrl = reactive({ fileUrl:`${app.api}/sys/oss/downloadLocal`})
const dataForm = reactive({
  id: '', name: '', projectId: '',
  lineId: '',sort:"", lgt: '', dms: '',
   equipmentTypeId: '',
  equipmentName: '',roughInType:"",
  projectName:"",
  notesImg:"",
  cableNumber:"", depthNumber:"", holesNumber:"",
  img :[],
  actionUrl: `${app.api}/sys/oss/uploadByLocal?token=${getToken()}`,
  dialogImageUrl: '',
  dialogVisible: false,
  fileList:[
   /* {uid:"12121",url:filrUrl.fileUrl+"?name=2c51d001cfe9470da0ab1feee8f010d7.png"},
    {uid:"12123",url:filrUrl.fileUrl+"?name=2c51d001cfe9470da0ab1feee8f010d7.png"},*/
  ],
  fileListOkId:[],
  fileListData:[],
  imgIds:"",
  lineList:[],
  typeList:[],
  roughInTypeList:[{"id":"1","name":"直埋"},{"id":"2","name":"顶管"},
                   {"id":"3","name":"电缆沟"},{"id":"4","name":"综合管廊"}],
  fileUrl : `${app.api}/sys/oss/downloadLocal`,
});

const rules = ref({
  name: [
    {required: true, message: '定位点名称不能为空', trigger: 'blur'}
  ],
  lineId: [
    {required: true, message: '线路不能为空', trigger: 'blur'}
  ],
  lgt: [
    {required: true, message: '定位点经度不能为空', trigger: 'blur'}
  ],
  dms: [
    {required: true, message: '定位点维度不能为空', trigger: 'blur'}
  ],
  equipmentTypeId: [
    {required: true, message: '设备类型不能为空', trigger: 'blur'}
  ],
  roughInType:[{required: true, message: '电缆敷设方式不能为空', trigger: 'blur'}],
});

const init = (row?: {}) => {
  debugger
  visible.value = true;
  dataForm.id = "";
  dataForm.fileListData=[];
  dataForm.fileList=[];
  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }
  if (""!=row.id && undefined !=row.id) {
    Object.assign(dataForm, row);
    dataForm.sort="";
    const rowList =[];
    if(undefined !=row.list){
      row.list.forEach((item)=>{
        const rowImg ={"id":"",url:"",keysId:''};
        rowImg.id=item.id;
        rowImg.url=dataForm.fileUrl+"?name="+item.url;
        rowImg.keysId=item.keysId;
        rowList.push(rowImg);
      })
      dataForm.fileList =rowList;
      dataForm.fileListData=rowList;
    }
  }else{
    dataForm.lineId =row.lineId
    dataForm.projectId = row.projectId
    dataForm.projectName = row.projectName
  }
  // 获取信息
  baseService.get("sysproject/line/getLineByProjectId"+"?projectId="+row.projectId).then((res) => {
    Object.assign(dataForm.lineList, res.data);
  });
// 获取信息
  baseService.get("sysapp/equipmenttype/getType").then((res) => {
    Object.assign(dataForm.typeList, res.data);
  });
 //获取下拉
  baseService.post("/sys/dict/type/getDataAllByType",{"dictType":"fsfx"}).then((res) => {
    Object.assign(dataForm.roughInTypeList, res.data);
  });
};


// 表单提交
const dataFormSubmitHandle = () => {
  if(dataForm.fileListData.length>0){
    dataForm.img =[];
    dataForm.fileListData.forEach((item:{})=>{
      if(null!=item.id){
        dataForm.img.push(item.id)
      }else
      {
        dataForm.img.push(item.response.data.fileId)
      }
    })
  }
  if(dataForm.img.length>0){
    dataForm.imgIds = dataForm.img.join(",");
  }
  //cableNumber holesNumber
  if(dataForm.roughInType=="2"){
    if(""==dataForm.holesNumber||null==dataForm.holesNumber||undefined==dataForm.holesNumber){
      ElMessage.error("顶管扩孔数不可以为空");
      return false;
    }
    if(""==dataForm.cableNumber||null==dataForm.cableNumber||undefined==dataForm.cableNumber){
      ElMessage.error("线缆条数不可以为空 ");
      return false;
    }
    debugger
    if(dataForm.cableNumber>dataForm.holesNumber){
      ElMessage.error("线缆条数不可以大于顶管扩孔数");
      return false;
    }
  }

  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    (!dataForm.id ? baseService.post : baseService.put)("/sysproject/equipment", dataForm).then((res) => {
      ElMessage.success({
        message: '成功',
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};


const handleRemove = (file:IObject, fileList:IObject)=> {
  debugger
  if("success"==file.status){
    const fileIds =[];
    fileIds.push(file.id)
    baseService.delete("/sysproject/fileurl", fileIds).then((res) => {
      ElMessage.success({
        message: '删除成功',
        duration: 500,
        onClose: () => {
          dataForm.fileListData=fileList;
        }
      });
    });
  }
};
// 上传之前
const beforeUploadHandle = (file: IObject) => {
  if (file.type !== "image/jpg" && file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif") {
    ElMessage.error("只支持jpg、png、gif格式文件！");
    return false;
  }
  //如果图片超过五张，则不显示+号
  if (dataForm.fileListData.length >= 3) {
    ElMessage.error("最多只支持上传3张图片！");
    return false;
  }
};
const handlePictureCardPreview =(file:IObject)=> {
  dataForm.dialogImageUrl = file.url;
  dataForm.dialogVisible = true;
};
const handleSuccess =(response:IObject, file:IObject, fileList:IObject)=> {
  dataForm.fileListOkId.push(response.data.fileId);
  dataForm.fileListData=fileList;
};

defineExpose({
  init
});
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
